<template>
  <el-container>
    <el-header style="background-color: #1F262E;height: 65px">
      <el-row style="height: 100%" type="flex" align="middle">
        <el-col :span="3">
          <div style="color: white;font-size: 23px;text-shadow: 1px 1px 2px white;">
            <i class="el-icon-s-management"></i>
            <span>绩效管理系统</span>
          </div>
        </el-col>
        <el-col :span="2" :offset="19">
          <el-button type="danger" style="float: right;padding: 8px 14px;">
            退出登录
            <i class="el-icon-switch-button"></i>
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="180px">
        <el-menu :default-active="activateMenu()" background-color="#545c64" text-color="white" active-text-color="#ffd04b"
                 style="height: 100%;border-width: 0">
          <el-menu-item index="1" @click="tabJump('/manage/worker')">
            <i class="el-icon-user-solid"></i>
            <span slot="title">员工管理</span>
          </el-menu-item>
          <el-menu-item index="2" @click="tabJump('/manage/job')">
            <i class="el-icon-menu"></i>
            <span slot="title">岗位管理</span>
          </el-menu-item>
          <el-menu-item index="3" @click="tabJump('/manage/task')">
            <i class="el-icon-s-order"></i>
            <span slot="title">任务管理</span>
          </el-menu-item>
          <el-menu-item index="5" @click="tabJump('/manage/system')">
            <i class="el-icon-s-platform"></i>
            <span slot="title">系统管理</span>
          </el-menu-item>
          <el-menu-item index="4" @click="tabJump('/manage/workProgress')">
            <i class="el-icon-s-marketing"></i>
            <span slot="title">任务完成情况</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main style="background-color: #F6F6F6">
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "index",
  methods: {
    tabJump(path) {
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    },
    activateMenu() {
      switch (this.$route.path) {
        case '/manage/worker':
          return '1';
        case '/manage/job':
          return '2';
        case '/manage/task':
          return '3';
        case '/manage/workProgress':
          return '4';
        case '/manage/system':
          return '5';
        default:
          return '1';
      }
    }
  }
}
</script>

<style scoped>
/*高度铺满剩余空间*/
.el-container, .el-aside {
  height: 100%;
}

i {
  color: white;
}
</style>
